<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="../js/jquery360.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jqueryUI.css">
</head>
<body>
    <div id="tabs" class="ui-tabs">
        <ul class="ui-tabs-nav">
            <li><a href="#tabs-1" id="tab-1">写入文件</a></li>
            <li><a href="#tabs-2" id="tab-2">读取文件</a></li>
            <li><a href="#tabs-3" id="tab-3">自定义</a></li>
        </ul>
        <div id="tabs-1" style="display: flex;flex-direction: column;">
            <label for="rngs" style="padding: .5em;">
                来自单元格:<input type="text" name="" id="rngs" style="width: 100%;">
            </label>
            <label for="wfilePath" style="padding: .5em;">
                完整文件路径:<input type="text" name="" id="wfilePath" style="width: 100%;">
            </label>
            <button id="write" style="margin-left: .5em;">写入</button>
            <label for="content" style="padding: .5em;">
                内容:<br><textarea name="" id="content" style="padding: .5em; width: 100%;"></textarea>
            </label>
            
        </div>
        <div id="tabs-2" style="display: flex;flex-direction: column;">
            <label for="rFilePath">
                文件路径:<input type="text" name="" id="rFilePath" style="width: 100%;">
            </label>
            <label for="">
                写入点:<input type="text" name="" id="" style="width: 100%;"></label>
            <div style="display: flex;">
                <label for=""><input type="checkbox" name="" id=""></label>
            </div>
            <label for=""><button id="readFile">读取</button><button id="writeToRng">写入单元格</button></label>
            <label for="">
                结果:<br><textarea name="" id="datas" style="width:100%"></textarea>
            </label>
        </div>
        <div id="tabs-3" style="display: flex;flex-direction: column;">
            <p>部署你的宏代码，它应该是立即执行的，例如:</p>
            <pre style="padding: 1em; background-color: gray; color: honeydew;"><code>(()=>{<br>    alert('hi')<br>})();</code>
            </pre>
            <p>会用<code>&lt;script&gt;&lt;&sol;script&gt;</code>将你的代码放入页面尾部并执行，当然你也可以在“调试器”中进行。</p>
            <br>
            <button id="addScript">执行</button>
            <br>
            <textarea name="" id="customMacros" style="width: 100%; color: white;background: gainsboro;font-size: smaller;">// 你的JavaScript 代码</textarea>
        </div>
    </div>
    <script>
        $(function(){
            $('#tabs').tabs();
        });
    </script>
    <script>
        $('#addScript').on('click',function(){
            let userCode = $('#customMacros').val();
            //let uscript = "<script>"+userCode+"</"+"script>";
            //$('body').append(uscript); NOTE: bad idea！
            eval(userCode)
        });
        $('#readFile').on('click',function(){
            let path = $('#rFilePath').val();
            let data = $("#datas").val();
        })
    </script>
    <script src="./io.js"></script>
</body>
</html>